<!--vue模板-->
<template>
  <div>
    <div class="tip">咨询信息</div>
    <el-form class="formData">
      <el-form-item label="联系工程师">
        <el-select v-model="data.saleId">
          <el-option
            v-for="item in saleOptions"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="询价类型">
        <el-radio-group v-model="data.type">
          <el-radio :value="1">询价单</el-radio>
          <el-radio :value="2">咨询单</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="tip">产品信息</div>
    <el-table :data="tableData" style="width: 1000px; margin: auto" border>
      <el-table-column prop="picurl" label="产品图片" width="100" />
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="model" label="产品型号" width="150" />
      <el-table-column prop="price" label="产品价格" width="150" />
      <el-table-column prop="num" label="需求数量" width="180" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="bj(row.tableType, row.id)"
            >报价</el-button
          >
          <el-button type="primary">历史报价</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDetail } from "@/api/customerinquiry.js";

//路由信息对象
const route = useRoute();
const router = useRouter();
const data = ref({
  saleId: "",
  type: 1
});
const tableData = ref([]);

function del(row) {
  let index = tableData.value.indexOf(row);
  tableData.value.splice(index, 1);
}

const saleOptions = [
  {
    id: 1,
    name: "张三"
  },
  {
    id: 2,
    name: "李四"
  }
];

/**
 *
 * @param type 1 产品询价 2  筛网  3 托辊
 * @param id 询价单明细id
 */
function bj(type, id) {
  console.log("type.>>", type);
  switch (type) {
    case 1: //产品报价
      router.push({ path: "/customer/inquiry/cpbj", query: { id } });
      break;
    case 2: //筛网报价
      break;

    case 3: //托辊报价
      break;
  }
}

async function init(id) {
  let res = await getDetail(id);
  if (res.code == 200) {
    data.value = res.data;
    tableData.value = res.data.customerInquiryDetails;
  }
}

onBeforeMount(() => {
  init(route.query.id);
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.tip {
  width: 1000px;
  margin: auto;
  height: 60px;
  line-height: 60px;
  border: #ccc solid 1px;
  padding-left: 20px;
}

.formData {
  width: 1000px;
  margin: auto;
  background-color: #fff;
  padding: 20px;
}
</style>
